<template>
  <el-dialog
    title="预览建议书"
    :visible.sync="previewVisible"
    width="50%"
    :close-on-click-modal="false"
  >
    <div class="content">
      <div class="previewContainer">
        <div class="previewContent">
          <h1 class="ctTtile">劳动保障监察建议书</h1>
          <p class="ctUscc">
            {{
              previewData.unit
            }}人社监建<span>[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]</span>号
          </p>
          <span class="underLine">{{ previewData.showCompanyName }}:</span>
          <div class="content">
            <div class="pt24">
              经调查，你单位在<span class="underLine">{{
                previewData.showProjectName
              }}</span
              >劳动用工中存在以下问题：<br />
              <div
                v-for="(item, index) in previewData.problemArr"
                :key="'show-' + item.indexId"
              >
                <span class="underLine">
                  {{ index + 1 }}、{{ item.reason }}
                </span>
                <br />
              </div>
            </div>
            <div class="pt24">
              为规范你单位的劳动用工行为，降低用工风险，保证劳动者合法权益，现提出以下建议：<br />
              <div
                v-for="(item, index) in previewData.problemArr"
                :key="'tip-' + item.indexId"
              >
                <div
                  class="underLine suggest"
                  v-html="index + 1 + '、' + item.tipStr"
                ></div>
              </div>
            </div>
            <p class="pt24">
              请你单位及时整改，并将整改情况于<span class="underLine">{{
                previewData.rectifyDateStr
              }}</span
              >前报我局。
            </p>
            <p class="pt24">
              监察员<span class="underLine">{{ previewData.inspector }}</span
              >，联系电话<span class="underLine">{{ previewData.tel }}</span>
            </p>
            <p class="ctClub">
              <span class="underLine">{{ previewData.handleMan }}</span>
            </p>
            <p class="ctDate">
              &nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
            </p>
          </div>
        </div>

        <div class="note">注：本建议书一式两份，一份交被监察单位，一份保存</div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelPreview">取 消</el-button>
      <el-button type="primary" @click="savePreview" class="saveBtn"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'previewDialog',
  props: {
    previewData: {
      type: Object,
    },
  },
  data() {
    return {
      previewVisible: false,
    }
  },
  methods: {
    showDialog() {
      this.previewVisible = true
    },
    hideDialog() {
      this.previewVisible = false
    },
    //关闭弹出框
    cancelPreview() {
      this.hideDialog()
    },
    savePreview() {
      this.hideDialog()
    },
  },
}
</script>

<style scoped lang="less">
.content {
  .previewContainer {
    margin-left: 24px;
    background: #f1f1f2;
    color: #333;
    font-size: 12px;
    line-height: 21px;

    .previewContent {
      margin: 0 30px;
      padding-top: 30px;

      .underLine {
        border-bottom: 1px solid #666;
      }

      .pt24 {
        padding-top: 24px;
      }

      .ctTtile {
        font-size: 18px;
        line-height: 18px;
        text-align: center;
      }

      .ctUscc {
        margin-top: 24px;
        text-align: right;
        font-size: 10px;

        .explain {
          text-decoration: underline;
        }
      }

      .content {
        padding: 0 0 10px 20px;

        .ctClub {
          padding-top: 100px;
          text-align: right;
        }

        .ctDate {
          padding-bottom: 60px;
          text-align: right;
        }
      }
    }

    .note {
      padding: 14px 27px;
      border-top: 1px dashed #d6d6d6;
      color: #999;
      font-size: 12px;
    }
  }
}
/deep/ .el-dialog__footer {
  height: 60px;
}
</style>
<style lang="less">
.suggest {
  display: flex;
  -webkit-display: flex;
  justify-content: flex-start;
  .tipBox {
    p {
      span {
        font-size: 12px !important;
        line-height: 21px;
      }
    }
  }
}
</style>
